<template>
    <div>
        <div>
        <div style="display: flex;">
            <div style="width: 50%;height: 100vh;display: flex;justify-content: center;background-color: rgb(235,244,254);">
                <div style="width: 50%;">
                    <div style="margin: 13rem 0 0 1rem;">
                        <!-- <img style="width: 1.875rem;height: 1.875rem;border-radius: 0.31rem;" src="../assets/img/logo/logo2.jpg" /> -->
                        <img style="width: 9.5rem;height: 2.5rem;border-radius: 0.31rem;margin-left: 1rem" src="../assets/img/logo/2.svg" />
                    </div>
                    <div class="welcome-title">{{$t('注册页.开始')}}</div>
                    <!-- 表单 -->
                    <div style="margin: 1rem 0 0 2rem;">
                        <el-form :model="accountInfo" label-width="23rem" label-position="top" style="max-width: 37.5rem" :rules="rules" ref="registerRef">
                            <el-form-item prop="name">
                                <template #label>
                                    <div class="form-label-email">{{$t('注册页.名字')}}</div>
                                </template>
                                <template #default>
                                    <el-input v-model="accountInfo.name" class="form-input-email" 
                                    :placeholder="placeholder[0]" @mouseenter="handleMouseEnter"
                                    @mouseleave="handleMouseLeave" :style="styles"></el-input>
                                </template>
                            </el-form-item>
                            <el-form-item prop="email">
                                <template #label>
                                    <div class="form-label-email">{{$t('注册页.邮箱')}}</div>
                                </template>
                                <template #default>
                                    <el-input v-model="accountInfo.email" class="form-input-email" :placeholder="placeholder[1]"></el-input>
                                </template>
                            </el-form-item>
                            <el-form-item prop="password">
                                <template #label>
                                    <div class="form-label-email">{{$t('注册页.密码')}}</div>
                                </template>
                                <template #default>
                                    <el-input type="password" show-password v-model="accountInfo.password" class="form-input-email" :placeholder="placeholder[2]"></el-input>
                                </template>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div style="margin:3.3rem 0 0 1.45rem;">
                        <el-button class="login-btn" id="btn1" @click="regitsterWeb()">Next</el-button>
                    </div>
                    <div style="margin:3rem 0 0 1.45rem;">
                        <el-button class="shift-login" id="btn1" @click="shiftLogin()">Switch to iog in</el-button>
                    </div>
                </div>
            </div>
            <!-- 右边 -->
            <div style="width: 50%;height: 100vh;display: flex;justify-content: center;">
                <div style="width: 50%;">
                    <div class="right-title">{{$t('注册页.右边.标题')}}</div>
                    <div class="box-blue" style="display: flex;">
                        <div style="margin: 1.5rem 0 0 1rem;">
                            <img style="width: 3.75rem;height: 3.75rem;" src="../assets/img/image/people.png"/>
                        </div>
                        <div style="margin-top: 1rem;margin-left: 1rem;">
                            <div class="form-label-email" style="font-size: 1rem;line-height: 2rem;">{{$t('注册页.右边.文字1')}}</div>
                            <div class="form-label-email">
                                <span style="color: rgb(104 49 255);font-size: 1rem;line-height: 2rem;margin-left: 0.6rem;">{{$t('注册页.右边.文字2')}}</span>
                                <span style="font-size: 1rem;line-height: 2rem;">{{$t('注册页.右边.文字3')}}</span>
                            </div>
                            <div class="right-box-sword">
                                {{ $t('注册页.右边.文字4') }}
                            </div>
                        </div>
                    </div>
                    <div style="margin: 0.5rem 0 0 1rem;">
                        <img src="../assets/img/image/score.png" />
                    </div>
                    <div style="margin: 0.8rem 0 0 1rem;">
                        <img src="../assets/img/image/three.png" />
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</template>
<script>
import { register } from '../apis/user'
import { buttonClick } from '../util/buttonClick';
export default{
    name: 'MyComponent',
    data(){
        return{
            accountInfo:{
                name:'',
                email:'',
                password:'',
            },
            // borderColor:''
            // 验证规则
            rules:{
                name:[
                    {required:false,message:'Please input your full name', trigger: 'blur'},
                    {min:2,message: 'Please input your full name', trigger: 'blur'}
                ],
                email:[
                    {required:false,message:'Please input email', trigger: 'blur'},
                    {min:3,message: 'Please input a valid email address', trigger: 'blur'},
                    {validator:checkEmail,trigger:'blur'}
                ],
                password:[
                    {required:false,message:'Please input old password',trigger: 'blur'},
                    {min:8,message: 'Password is too short, at least 8 characters', trigger: 'blur'},
                    {validator: validatePassword, trigger: 'blur'}
                ],
            },
            placeholder:[this.$t('注册页.名字.placeholder'),this.$t('注册页.邮箱.placeholder'),this.$t('注册页.密码.placeholder')]
        }
    },
    created() {
        // 从路由查询参数中获取邮箱地址
        this.accountInfo.email = decodeURIComponent(this.$route.query.email || '');
        // this.$gtm.trackView({ page: this.$route.path,gtm: this.$route.meta.gtm });
    },
    mounted ( )  { 
        // const additionalData = this.$route.meta.gtmAdditionalEventData || {};
        this.$gtm.trackView({ page: this.$route.path,gtm: this.$route.meta.gtm });
    } ,
    computed:{
        // inputClass(){
        //     return 'form-input-email'
        // },
        styles(){
            return this.borderColor
        }
    },
    methods:{
        // handleMouseEnter(){
        //     this.borderColor = 'border-color:rgb(104 49 255)';
        // },
        // handleMouseLeave (){
        //     this.borderColor = "border-color:rgb(200 225 255)";
        // }
        regitsterWeb(){
            this.$refs.registerRef.validate((valid)=>{
                console.log(valid)
                if(valid){
                    register(this.accountInfo).then((res)=>{
                        console.log(res)
                        if(res.code == 200 && res.status == 1){
                            localStorage.setItem('token', res.data.token)
                            this.$router.push('/')
                            const pagePath = window.location.href; // 当前页面 URL
                            const buttonName = 'register' // 按钮名称
                            buttonClick(pagePath, buttonName);
                        }
                    })
                }else {
                    console.log('Verification failed!');
                    return false;
                }
            })
        },
        shiftLogin(){
            this.$router.push('/login')
        },
    },
    
};
function validatePassword(rule, value, callback){
        const regex = /^(?=.*\d)(?=.*[a-zA-Z])[a-zA-Z\d]+$/;
        if (value!=null && !regex.test(value)) {
            callback(new Error('Password format error: must contain letters and numbers'));
        } else {
            callback();
        }
}
function checkEmail(rule, value, callback){
    if(value != null && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)){
        callback(new Error('Email format incorrect！'));
    }
    callback()
}
</script>
<style lang="scss" scoped>
.welcome-title{
    margin: 0.7rem 2rem;
    width: 85%;
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
    line-height: 2.3rem;
    color:rgb(21,13,63)
}
.form-label-email{
    height: 1.75rem;
    line-height: 1.75rem;
    font-weight: 600;
    font-size: 1.125rem;
    color:rgb(21,13,63)
}
.form-input-email{
    width: 80%;
    height: 3.5rem;
    box-sizing: border-box;
    // border: 0.125rem solid rgb(200 225 255);
    border-radius: 0.5rem;
    // :deep(.el-input__wrapper) {
    //     box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
    //     cursor: default;
    //     .el-input__inner {
    //     cursor: default !important;
    //     }
    // }
}
.login-btn{
    width: 85%;
    height: 4rem;
    align-items: center;
    border:0.125rem solid rgb(21 13 63);
    border-radius: 2rem;
    cursor: pointer;
    font-size:1rem ;
    font-weight: 600;
    background-color: #150d3f;
    color: rgb(27 207 186);
}
.shift-login{
    width: 85%;
    height: 4rem;
    align-items: center;
    border:0.125rem solid rgb(27 207 186);
    border-radius: 2rem;
    cursor: pointer;
    font-size:1rem ;
    font-weight: 600;
    background-color: #fff;
    color: rgb(21 13 63);
}
.el-button:hover{
  background-color: rgb(27 207 186);
  color: rgb(21 13 63);
  border: none;
}
.right-title{
    margin: 18rem 4rem;
    width: 85%;
    font-size: 1.9rem;
    font-weight: 900;
    margin-bottom: 0.8rem;
    line-height: 2.2rem;
    color:rgb(21,13,63)
}
.box-blue{
    margin: 2.5rem 1.7rem;
    width: 29.25rem;
    height: 6.625rem;
    border: 0.0625rem solid rgb(200 225 255 );
    border-radius: 0.5rem;
    box-shadow: 0 0 0.03rem 0.03rem rgb(200 225 255);
    .right-box-sword{
        margin: 0 0 0 0.6rem;
        font-size: .75rem;
        // font-weight: 600;
        line-height: 1rem;
    }
}
</style>